<template>
      <div class="transfer-container">
        <!-- 顶部表格 -->
        <div class="transfer-panel top-panel">
          <h3>选择列表</h3>
        <bfe-table
          ref="topTableRef"
          :data="mdlIdList"
          :columns="columns"
          border
          style="width: 100%"
          :height="200"
          highlight-current-row
          @selection-change="handleTopRowSelected"
        > 
            <template>
                <bfe-table-column  type="index" :index="indexMethod" width="55"></bfe-table-column>
            </template>
            <template>
                <bfe-table-column :reserve-selection="true" type="selection" width="55" :selectable="isRowSelectable"></bfe-table-column>
            </template>
          <template v-for="(column, i) in columns">
            <bfe-table-column
              :prop="column.prop"
              :label="$t(column.label)"
              :key="i"
              :min-width="column.width ? column.width : 120"
              show-overflow-tooltip
            ></bfe-table-column>
          </template>
        </bfe-table>
        </div>
    
        <!-- 中间区域（下拉框和按钮） -->
        <div class="transfer-middle">
          <!-- 下拉框 -->
          <div class="transfer-filter" v-if="userInfo.userAhrInstNo ==='3'">
            <select v-model="selectedRegion" @change="filterData">
              <option value="all">模型區域</option>
              <option v-for="(item, index) in bankIdObj[language]" :key="item.key" :value="item.key" >
                {{ item.value }}
              </option>
            </select>
          </div>
    
          <!-- 按钮 -->
          <div class="transfer-buttons">
            <button @click="moveToBottom" :disabled="!selectedTop.length">移到下边</button>
            <button @click="moveToTop" :disabled="!selectedBottom.length">移到上边</button>
          </div>
        </div>
    
        <!-- 底部表格 -->
        <div class="transfer-panel bottom-panel">
          <h3>待选择列表</h3>
        <bfe-table
          ref="bottomTableRef"
          :data="bottomList"
          :columns="columns"
          border
          style="width: 100%"
          :height="200"
          highlight-current-row
          @selection-change="handleBottomRowSelected"
        >
            <template>
                <bfe-table-column  type="index" :index="indexMethod" width="55"></bfe-table-column>
            </template>
            <template>
                <bfe-table-column :reserve-selection="true" type="selection" width="55" :selectable="isRowSelectable"></bfe-table-column>
            </template>
          <template v-for="(column, i) in columns">
            <bfe-table-column
              :prop="column.prop"
              :label="$t(column.label)"
              :key="i"
              :min-width="column.width ? column.width : 120"
              show-overflow-tooltip
            ></bfe-table-column>
          </template>
        </bfe-table>
        </div>
      </div>
    </template>
    
    <script>
    import {mapState} from 'vuex'
    
    export default {
        props: {
            bankIdObj: {
                  type: Object,
                   default: () => ({
                        zh_TW: [], // 中文繁体语言的数据
                        en_US: []  // 英文语言的数据
                    })
            },
            checkList: {
                  type: Array,
                   default: () => []
            },
            type: {
                  type: String,
                   default: ''
            }
        },  
      data() {
        return {
          selectedRegion: 'all',
          selectedTop: [],
          selectedBottom: [],
          mdlIdList: [],
          bottomList: [],
          columns: [
            { prop: 'mdlId', label: '模型編號', width: 120 },
            { prop: 'mdlName', label: '模型標識', width: 180 },
            { prop: 'mdlArea', label: '模型區域', width: 120 }
          ],
        };
      },
      computed: {
        ...mapState({
          language: (state) => state.base.language,
            userInfo:(state)=>state.base.userInfo,
        }),
      },
      watch:{
        checkList: {
                handler(newValue) {
                    console.log(newValue)
                    if (newValue && newValue.length > 0) {
                        this.bottomList = newValue;
                    }
                },
                deep: true,
                immediate: true
            }
        }, 
    mounted() {
        if(this.userInfo.userAhrInstNo !== '3') {
            this.getTableData(this.userInfo.userAhrInstNo)
        }
    },
      methods: {
        indexMethod(index) {
            return index + 1;
        },
        isRowSelectable(row) {
            return this.type !=='detail' && this.type !== 'delete';
        },
        filterData(e) {
            this.selectedRegion = e.target.value
            this.bottomList = []
            this.mdlIdList = []
            this.getTableData(e.target.value)
        },

        getTableData(value) {
            const params = {
                optCode: 'STM002GET1103',
                payload: {
                    mdlArea: value
                }
              }
          this.$p2svr(this.$api['_01_STM002EXEMPT1100'] , 'RequestPoAuth', params).then(res => {
            console.log(res, '========> 获取到的接口')
            this.mdlIdList = res.payload
          })
        },
    
        handleTopRowSelected(row) {
            this.selectedTop = row
        },
    
        handleBottomRowSelected(row) {
              this.selectedBottom = row
        },
    
        moveToBottom() {
          if (!this.selectedTop.length) return;
    
        // 将选中的项添加到下方表格
        this.bottomList = this.bottomList.concat(this.selectedTop);

        // 从上方表格中移除选中的项
        this.mdlIdList = this.mdlIdList.filter(
            (item) => !this.selectedTop.includes(item)
        );

        // 清空选中
        this.$refs.topTableRef.clearSelection()
        // 清空选中项
        this.selectedTop = [];
        },
    
        moveToTop() {
          if (!this.selectedBottom.length) return;
    
         // 将选中的项添加到上方表格
            this.mdlIdList = this.mdlIdList.concat(this.selectedBottom);

            // 从下方表格中移除选中的项
            this.bottomList = this.bottomList.filter(
                (item) => !this.selectedBottom.includes(item)
            );

            // 清空选中
            this.$refs.bottomTableRef.clearSelection()
            // 清空选中项
            this.selectedBottom = [];
        },
      }
    };
    </script>
    
<style lang="less" scoped>
    .transfer-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 20px;
    }
    
    .transfer-panel {
     width: 100%;
     border: 1px solid #ccc;
     padding: 20px;
     margin: 10px 0;
    }
    
    .transfer-middle {
     display: flex;
     align-items: center;
     gap: 20px;
     width: 100%;
    }
    
    .transfer-filter {
     flex: 1;
     display: flex;
     align-items: center;
    }
    
    .transfer-filter select {
     padding: 8px;
     border-radius: 4px;
     border: 1px solid #ccc;
    }
    
    .transfer-buttons {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 10px;
    }
    
    button {
     padding: 8px 20px;
     border: none;
     border-radius: 4px;
     background-color: #4CAF50;
     color: white;
     cursor: pointer;
     transition: background-color 0.3s;
    }
    
    button:hover {
     background-color: #45a049;
    }
    
    button:disabled {
     background-color: #cccccc;
     cursor: not-allowed;
    }
    </style>